import React, {Component} from 'react'
import {ViewPropTypes, Text, StatusBar, StyleSheet, View, Platform, DeviceInfo} from 'react-native'
import {PropTypes} from 'prop-types';

const NAV_BAR_HEIGHT_IOS = 44;//导航栏在iOS中的高度
const NAV_BAR_HEIGHT_ANDROID = 50;//导航栏在Android中的高度
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 0 : 20;//状态栏的高度
const StatusBarShape = {//设置状态栏所接受的属性
  barStyle: PropTypes.oneOf(['light-content', 'default']),
  hidden: PropTypes.bool,
  backgroundColor: PropTypes.string,
};
export default class NavigationBar extends Component {
    //提供属性的类型检查
    static propTypes = {
      style: ViewPropTypes.style,
      title: PropTypes.string,
      titleView: PropTypes.element,
      titleLayoutStyle: ViewPropTypes.style,
      statusBar: PropTypes.shape(StatusBarShape),
      hide: PropTypes.bool,
      leftText: PropTypes.string,
      leftStyle: PropTypes.object,
      leftButton: PropTypes.element,
      rightText: PropTypes.string,
      rightStyle: PropTypes.object,
      rightButton: PropTypes.element,
    };
    //设置默认属性
    static defaultProps = {
      statusBar: {
        barStyle: 'light-content',
        hidden: false,
      }
    };



    render() {
      let statusBar = !this.props.statusBar.hidden ?
        <View style={styles.statusBar}>
          <StatusBar {...this.props.statusBar} />
        </View> : null;

      let titleView = this.props.titleView ? this.props.titleView :
        <Text ellipsizeMode="head" numberOfLines={1} style={styles.title}>{this.props.title}</Text>;

      let leftView = this.props.leftButton ? this.getButtonElement(this.props.leftButton) : 
        <Text style={this.props.leftStyle}>{this.props.leftText}</Text>;

      let rightView = this.props.rightButton ? this.getButtonElement(this.props.rightButton) : 
        <Text style={this.props.rightStyle}>{this.props.rightText}</Text>;

      let appHeader = this.props.hide ? null :
        <View style={styles.appHeader}>
          {leftView}
          <View style={[styles.appHeaderTitleContainer, this.props.titleLayoutStyle]}>
            {titleView}
          </View>
          {rightView}
        </View>;
      return (
        <View style={[styles.container, this.props.style]}>
          {statusBar}
          {appHeader}
        </View>
      )
    }

    getButtonElement(data) {
      return (
        <View style={styles.appHeaderButton}>
          {data ? data : null}
        </View>
      )

    }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#3E73FF'
  },
  statusBar: {
    height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
  },
  appHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 16,
    paddingRight: 16,
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    zIndex: 2,
  },
  appHeaderButton: {
    alignItems: 'center'
  },
  appHeaderTitleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: '#282828',
    fontSize: 18,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal': '400'),
  },
});